<template>
	<view class="input-checkbox">
		<view class="label">
			<text :class="{required: required}">{{label}}</text>
			<text>:</text>
		</view>
		<checkbox-group class="industry-checkbox-group" @change="onChange">
			<label v-for="item in list" :key="item.name">
				<checkbox class="industry-checkbox" :value="item.value" :checked="false" color="#eb6100" />
				{{item.name}}
			</label>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		name: "input-checkbox",
		props: {
			label: {
				type: String
			},
			required: {
				type: Boolean,
				default: false
			},
			value: {
				type: String
			},
			range: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				list: [
					{
						value: '成品制造商',
						name: '成品制造商',
						checked: 'false'
					},
					{
						value: '配件制造商',
						name: '配件制造商',
						checked: 'false'
					},
					{
						value: 'USA',
						name: '经销商',
						checked: 'false'
					},
					{
						value: '设备安装、剧场、舞台工程',
						name: '设备安装、剧场、舞台工程',
						checked: 'false'
					},
					{
						value: '媒体单位',
						name: '媒体单位',
						checked: 'false'
					},
					{
						value: '其他行业',
						name: '其他行业',
						checked: 'false'
					}
				]
			};
		},
		methods: {
			onChange(e) {
				const items = this.list
				const values = e.detail.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			}
		}
	}
</script>

<style lang="less">
	@import url('@/common/less/vars.less');
	
	.input-checkbox {
		color: @text-color;
		font-size: @main-font-size;
		margin-bottom: 14px;
		margin-top: 6px;

		&>.label {
			margin-bottom: 6px;
		}

		&>.label>text:first-child.required::after {
			content: '*';
			color: @theme-color;
			font-size: @main-font-size;
		}

		&>.label>text:nth-child(2) {
			margin-left: 7.03rpx;
		}

		.industry-checkbox-group{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.industry-checkbox{
				margin-bottom: 12px;
			}
		}
		
		

	}
</style>
